import React, { memo, useEffect, useRef } from 'react';

import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getNewAlbumsAction } from "../../store/actionCreators";

import ThemeHeaderRCMD from '@/components/theme-header-rcmd';
import { AlbumWrapper } from "./style";
import { Carousel } from 'antd';
import AlbumCover from "@/components/album-cover";

const NewAlbum = memo(() => {
  const dispatch = useDispatch();
  const { newAlbums } = useSelector(state => ({
    newAlbums: state.getIn(["recommend", "newAlbums"])
  }), shallowEqual);
  const pageRef = useRef();

  useEffect(() => {
    dispatch(getNewAlbumsAction(10))
  }, [dispatch]);

  return (
    <AlbumWrapper>
      <ThemeHeaderRCMD title="新碟上架" moreLink="/discover/album" />

      <div className="content">
        <button className="arrow arrow-left sprite_02" onClick={e => pageRef.current.prev()}></button>

        <div className="album">
          <Carousel ref={pageRef} dots={false}>
            {
              [0, 1].map(item => {
                return (
                  <div key={item} className="page">
                    {/* 
                      一共两页page进行播放，每页5条; 数组共10条；
                      第一页：newAlbums.slice(item * 5, (item + 1) * 5)，0~5不包含第五条；
                      第二页：newAlbums.slice(item * 5, (item + 1) * 5), 5~10不包含第十条；
                    */}
                    {
                      newAlbums.slice(item * 5, (item + 1) * 5).map(iten => {
                        return (
                          <AlbumCover 
                            key={iten.name} 
                            item={iten}
                            size={100}
                            width={118}
                            bgp="-570px"
                          />
                        )
                      })
                    }
                  </div>
                )
              })
            }
          </Carousel>
        </div>

        <button className="arrow arrow-right sprite_02" onClick={e => pageRef.current.next()}></button>
      </div>
    </AlbumWrapper>
  )
})

export default NewAlbum